<template>
  <div class="ly-message-content">
    <el-tabs v-model="activeName">
      <el-tab-pane :label="`通知${notifyNum}`" name="notify">
        <ly-notify-item class="item" />
        <ly-notify-item class="item" />
        <ly-notify-item class="item" />
        <ly-notify-item class="item" />
        <ly-notify-item class="item" />
        <div class="bottom-wrapper">
          <el-link
            :underline="false"
            class="flex-sub text-center"
            @click="clear('notify')"
            >清空通知</el-link
          >
          <div class="text-gray">|</div>
          <el-link
            :underline="false"
            class="flex-sub text-center"
            @click="more('notify')"
            >查看更多</el-link
          >
        </div>
      </el-tab-pane>
      <el-tab-pane :label="`消息${messageNum}`" name="message">
        <ly-message-item class="item" />
        <ly-message-item class="item" />
        <ly-message-item class="item" />
        <ly-message-item class="item" />
        <ly-message-item class="item" />
        <div class="bottom-wrapper">
          <el-link :underline="false" class="action" @click="clear('message')"
            >清空消息</el-link
          >
          <div>|</div>
          <el-link :underline="false" class="action" @click="more('message')"
            >查看更多</el-link
          >
        </div>
      </el-tab-pane>
      <el-tab-pane :label="`待办${todoNum}`" name="todo">
        <ly-todo-item class="item" />
        <ly-todo-item class="item" />
        <ly-todo-item class="item" />
        <ly-todo-item class="item" />
        <ly-todo-item class="item" />
        <div class="bottom-wrapper">
          <el-link
            :underline="false"
            class="flex-sub text-center"
            @click="clear('todo')"
            >清空待办</el-link
          >
          <div class="text-gray">|</div>
          <el-link
            :underline="false"
            class="flex-sub text-center"
            @click="more('todo')"
            >查看更多</el-link
          >
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
import LyTodoItem from "@/layouts/components/message/LyTodoItem.vue";
import LyNotifyItem from "@/layouts/components/message/LyNotifyItem.vue";
import LyMessageItem from "@/layouts/components/message/LyMessageItem.vue";

@Component({
  name: "LyMessageContent",
  components: {
    LyTodoItem,
    LyNotifyItem,
    LyMessageItem,
  },
})
export default class LyMessageContent extends Vue {
  //#region vue prop =================================

  //#endregion

  //#region vue data =================================
  activeName = "";
  notifyNum = "(4)";
  messageNum = "(4)";
  todoNum = "(4)";
  //#endregion

  update() {
    this.activeName = this.activeName === "0" ? "notify" : this.activeName;
  }
  clear(type) {
    if (!this[type + "Num"]) {
      return;
    }
    this[type + "Num"] = "";
    this.$emit("clear-num", 1);
  }
  more() {
    this.$successMsg!("click more");
  }
  //#endregion
}
</script>
<style lang="scss"></style>
<style lang="scss" scoped>
.ly-message-content {
  width: 280px;
  .bottom-wrapper {
    display: flex;
    justify-content: space-around;
    padding-top: 10px;
    border-top: 1px solid #f5f5f5;
    .action {
      flex: 1;
      text-align: center;
    }
  }
}
</style>
